<template>
  <div class="room-container" @click="product">
    <i v-if="room.status === 1 || room.status === '1'" class="iconfont icon-shouwan empty"></i>
    <div class="img">
      <img
        class="inner-img"
        :src="(room.img === undefined || room.img === '')? '../../../static/images/unknown.png' : room.img"
      />
    </div>
    <div class="content">
      <p class="content-title">{{room.title}}</p>
      <p class="room-number">
        房间号
        <span class="val">{{room.roomNumber}}</span>
      </p>
    </div>
    <div class="price">
      <div v-if="!isRoomGoods">
        <span class="account">¥ {{room.salePrice}}</span>
        <div class="last-amount">
          已售
          <span class="amount-val">{{room.totalAmount}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    room: {
      type: Object,
      default: {}
    },
    isRoomGoods: {
      type: Boolean,
      default: false
    },
    showRoomGoodsDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    product: function () {
      this.$store.commit("saveRoomInfo", this.room);
      this.$store.commit("saveProductId", this.room.id);
      if (this.isRoomGoods) {
        this.$router.push({
          path: "/pages/roomGoodsList"
        });
      }
      if (this.showRoomGoodsDetail) {
        this.$router.push({
          path: "/pages/roomGoodsDetails"
        });
      } else {
        this.$router.push({
          path: "/pages/roomDetails"
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
.room-container {
  padding: 10px;
  display: flex;
  position: relative;
  .content {
    padding: 10px 0 0 0;
    .content-title {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2; /*要显示的行数*/
      -webkit-box-orient: vertical;
    }
    .room-number {
      font-size: 12px;
      color: #999999;
      margin: 15px 0;
      .val {
        color: #999999;
        padding-left: 3px;
      }
    }
  }
  .empty {
    position: absolute;
    font-size: 40px;
    right: 2rpx;
    opacity: 0.5;
    top: 0;
  }
  &:after {
    content: "";
    background-color: #eeeeee;
    height: 1px;
    width: 100%;
    bottom: 0;
    position: absolute;
    z-index: 1;
    left: 0;
  }
  .img {
    .inner-img {
      width: 80px;
      height: 80px;
    }
    flex: 0.5;
  }
  .price {
    flex: 0.5;
    text-align: right;
    padding: 10px 0 0 0;
    span {
      margin: 0 3px;
    }
    .account {
      font-size: 16px;
      color: #c89f62;
    }
    .last-amount {
      margin: 15px 0;
      font-size: 12px;
      color: #999999;
      .amount-val {
        padding: 0 0.5px;
        color: #c89f62;
      }
    }
  }
  .content {
    font-size: 14px;
    flex: 1;
    .item {
      margin: 15px 0;
      font-size: 12px;
    }
  }
}
</style>